I ran into this Runtime error which says setState is undefined as I tried to connect to my Rinkeby test network on Metamask. I have tried binding using constructor props but that is not working. I am at loss what to do. Here's my code:
import React, { Component } from 'react'
import { Button, Form, Input, Grid, Message } from 'semantic-ui-react'
import Layout from '../../components/Layout'
import factory from '../../ethereum/factory'
import web3 from '../../ethereum/web3'
import { Router } from '../../routes'
class New extends React.Component {
constructor(props) {
super(props);
this.state = {
minimumContribution: '',
errorMessage: '',
loading: false
}
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit = async event => {
event.preventDefault()
const accounts = await web3.eth.getAccounts()
this.setState({ loading: true, errorMessage: '' })
try {
await factory.methods.createCampaign(this.state.minimumContribution).send({
from: accounts[0]
});
Router.pushRoute('/')
} catch (error) {
this.setState({ errorMessage: error.message })
}
this.setState({ loading: false })
}
render() {
const { errorMessage, loading } = this.state
return (
<Layout>
<Grid centered columns={2}>
<Grid.Column>
<h3>Create a Campaign.</h3>
<Form onSubmit={this.onSubmit} error={!!errorMessage}>
<Form.Field>
<lable>Minimum Contribution </lable>
<Input
label="WEI"
labelPosition="right"
value={this.state.minimumContribution}
onChange={event=>this.setState({minimumContribution:event.target.value})}
/>
</Form.Field>
<Message error header="Oops!" content={errorMessage}/>
<Button loading={loading} primary>Create</Button>
</Form>
</Grid.Column>
</Grid>
</Layout>
)
}
}
export default New
If it does help I am following an ethereum course on Udemy (Ethereum and Solidity: The Complete Developer's Guide). The error occurs at lecture 190.
Looks like the 'this' context is being lost.
add a new method using arrow function
handleChange = event => this.setState({minimumContribution:event.target.value})
Refer that function in onChange
onChange={this.handleChange}
You should use async onSubmit (event) { and not onSubmit = async event => {.
The former declares a method while the latter initializes a class property with an arrow function. Arrow functions don't have their own this (and no, binding won't change that) so the surrounding scope's this will be used, which will be the global scope (the class block isn't a scope per se as it cannot contain code), and the global scope's this is undefined, and therefore, your code currently crashes on accessing this.setState.
remove this.onSubmit = this.onSubmit.bind(this); from the constructor if you want to use class properties.
for more information, see
How to use arrow functions (public class fields) as class methods?